<template>
  <div
    class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/50 to-indigo-50"
  >
    <div class="container mx-auto px-4 py-8">
      <!-- 准备阶段顶部返回区域 -->
      <div class="flex items-center justify-between mb-6">
        <Button
          :disabled="countdown <= 1"
          class="flex items-center gap-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 transition-all duration-200"
          variant="ghost"
          @click="handleBackToSelection"
        >
          <ArrowLeft class="w-4 h-4"/>
          {{ t("preparation.backToSelection") }}
        </Button>

        <div class="flex items-center gap-2">
          <Badge class="px-3 py-1" variant="outline">
            {{
              battleMode === "team"
                ? t("preparation.teamMode")
                : t("preparation.soloMode")
            }}
          </Badge>
          <Badge
            class="px-3 py-1 bg-orange-50 text-orange-600 border-orange-200"
            variant="outline"
          >
            {{ t("preparation.preparing") }}
          </Badge>
        </div>
      </div>

      <Card
        class="w-full max-w-2xl flex items-center bg-white/90 backdrop-blur-sm border-2 border-blue-200 shadow-2xl"
        style="margin: auto"
      >
        <CardContent class="p-12 text-center space-y-8">
          <!-- 对手信息 -->
          <div class="space-y-4">
            <div
              :class="`w-24 h-24 mx-auto rounded-full bg-gradient-to-br ${selectedAI?.bgGradient} border-4 border-white shadow-lg flex items-center justify-center text-4xl`"
            >
              {{ selectedAI?.emoji }}
            </div>
            <div>
              <h2 class="text-2xl font-bold text-slate-800 mb-2">
                {{ t("preparation.vs", {name: selectedAI?.name}) }}
              </h2>
              <p class="text-slate-600 mb-3">
                {{ selectedAI?.description }}
              </p>
              <div class="flex justify-center gap-2">
                <Badge
                  v-for="(specialty, index) in selectedAI?.specialties"
                  :key="index"
                  class="text-xs"
                  variant="secondary"
                >
                  {{ specialty }}
                </Badge>
              </div>
            </div>
          </div>

          <!-- 对战模式信息 -->
          <div
            class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200"
          >
            <h3 class="font-semibold text-lg mb-3 text-slate-800">
              {{
                battleMode === "team"
                  ? t("preparation.teamBattleMode")
                  : t("preparation.soloBattleMode")
              }}
            </h3>
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div class="flex items-center gap-2">
                <Timer class="w-4 h-4 text-blue-600"/>
                <span
                >{{
                    t("preparation.rounds", {
                      count: battleMode === "team" ? 6 : 5,
                    })
                  }}</span
                >
              </div>
              <div class="flex items-center gap-2">
                <Zap class="w-4 h-4 text-yellow-600"/>
                <span
                >{{
                    t("preparation.secondsPerRound", {
                      count: battleMode === "team" ? 20 : 15,
                    })
                  }}</span
                >
              </div>
              <div class="flex items-center gap-2">
                <Target class="w-4 h-4 text-green-600"/>
                <span>{{ t("preparation.mixedQuestionTypes") }}</span>
              </div>
              <div class="flex items-center gap-2">
                <Trophy class="w-4 h-4 text-purple-600"/>
                <span>{{ t("preparation.realTimeScoring") }}</span>
              </div>
            </div>
          </div>

          <!-- 倒计时 -->
          <div class="space-y-4">
            <p class="text-slate-600 font-medium">
              {{ t("preparation.battleStartingSoon") }}
            </p>
            <div class="relative">
              <div
                class="w-32 h-32 mx-auto rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-2xl"
              >
                <span class="text-6xl font-bold text-white">
                  {{ countdown || "🚀" }}
                </span>
              </div>
              <!-- 暂时移除动画效果 -->
              <div
                v-if="countdown > 0"
                class="absolute inset-0 rounded-full border-4 border-blue-400"
              />
            </div>

            <p
              v-if="countdown > 0"
              :key="`text-${countdown}`"
              class="text-xl font-semibold text-slate-700"
            >
              {{ getCountdownText(countdown) }}
            </p>
            <p
              v-else
              class="text-xl font-bold text-transparent bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text"
            >
              {{ t("preparation.startBattle") }}
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from "vue";
import {useI18n} from "vue-i18n";
import Button from "@/components/Button.vue";
import Badge from "@/components/badge.vue";
import Card from "~/components/Card/Card.vue";
import CardContent from "~/components/Card/CardContent.vue";
import {ArrowLeft, Timer, Zap, Target, Trophy} from "lucide-vue-next";

const props = defineProps({
  battleMode: {
    type: String,
    required: true,
  },
  selectedAI: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["countdown-complete", "back-to-selection"]);

const {t} = useI18n();

const countdown = ref(5);
let countdownTimer = null;

const getCountdownText = (value) => {
  const texts = {
    5: "准备就绪！",
    4: "调整心态...",
    3: "专注准备...",
    2: "集中注意力...",
    1: "即将开始！",
  };
  return texts[value] || "";
};

const handleBackToSelection = () => {
  emit("back-to-selection");
};

onMounted(() => {
  const startTime = Date.now();
  countdownTimer = setInterval(() => {
    const elapsed = Date.now() - startTime;
    const remaining = Math.max(0, 5 - Math.floor(elapsed / 1000));
    countdown.value = remaining;
    if (remaining <= 0) {
      clearInterval(countdownTimer);
      emit("countdown-complete");
    }
  }, 1000);
});

onUnmounted(() => {
  clearInterval(countdownTimer);
});
</script>
